<template>
 <div style="display: flex; width: calc(100% - 60px); padding: 0px 30px; margin-top: 30px; align-items: center; justify-content: center; align-content: center;">
    <div style="width: 220px; color:#b1191a;font-family: 华文彩云; font-size: 30px; font-weight: bold; text-align: center;">
      💧简易购
    </div>
    <div style="width: calc(100% - 440px); margin-left: 40px; display: flex;">
      <div>
        <input type="text" placeholder="请输入搜索内容" style="width: 600px;display: flex; border: 2px solid #b1191a; outline:none; padding: 10.8px 16px;" />
        <div class="fontType" style="margin-top: 6px;">
          <a href="#" style="margin:10px 16px;">简易购日常</a>
          <a href="#" style="margin:10px 16px;">优惠购首发</a>
          <a href="#" class="a1" style="margin:10px 16px;">亿元优惠券</a>
          <a href="#" style="margin:10px 16px;">购机补贴</a>
          <a href="#" style="margin:10px 16px;">手机好店</a>
          <a href="#" style="margin:10px 16px;">美味土鸡</a>
          <a href="#" style="margin:10px 16px;">数码电子</a>
        </div>
      </div>
      <div>
        <span style="cursor: pointer; display: flex; color: white; background-color: #b1191a; padding: 10px 16px;">搜索</span>
        <div class="fontType" style="margin-top: 6px;"><a href="#" style="margin:10px 16px;">通信</a></div>
      </div>
    </div>
    <div class="fontType" style="width: 180px; font-size: 14px;">
      <span style="background-color: #f7f7f7; padding: 10px 16px; cursor: pointer;">
        🛒我的购物车 〉
      </span>
    </div>
 </div>
 <div style="border-bottom:2px solid #b1191a; margin-top: 20px; padding: 0px 30px; display: flex; text-align: center; align-content: center;align-items: center;">
  <span style="display: block; width: 200px; line-height: 30px; color: white; background-color: #B1191A; padding: 10px 20px;">全部商品分类</span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">服装城</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">美妆馆</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">传智超市</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">全球购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">闪购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">团购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">拍卖</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">有趣</a></span>
 </div>
 <div style="display: flex; margin:0px 30px;">
  <div style="width: 236px; height: 461px; background-color: #C81623;border:2px solid #C81623; font-size: 14px;">
    <div class="divTitle">
      家用电器
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      手机 数码 通信
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      电脑 办公
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      家具、家具、家装、厨具
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      男装、女装、童装、内衣
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      个户化妆、清洁用品、宠物
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      鞋靴、箱包、珠宝、奢侈品
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      运动户外、钟表
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      汽车、汽车用品
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      母婴、玩具乐器
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      医疗 保健
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      图书、音像、电子书
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      彩票、旅行、充值、票务
      <span style="float: right;">></span>
    </div>
    <div class="divTitle">
      理财、众筹、白条、保险
      <span style="float: right;">></span>
    </div>
  </div>
  <div style="width: calc(100% - 480px);">
    <img src="../assets/images/index.jpg" style="width: calc(100% - 10px); height: 455px; margin-top: 10px; margin-left: 10px;" />
  </div>
  <div style="width: 240px;">
    <div style="margin: 10px; margin-right: 0px; border: 1px solid #ccc;">
      <div class="fontType" style="padding: 6px 10px;border-bottom: 1px solid #ccc;">
        <span style="font-size: 14px;">简易购热销 </span>
        <span style="float: right;">更多></span>
      </div>
      <div class="fontType" style="padding: 6px 10px;border-bottom: 1px solid #ccc;">
        <div style="margin-bottom: 10px; margin-top: 6px;"><a href="#">【特惠】爆款耳机5折秒！</a></div>
        <div style="margin-bottom: 10px;"><a href="#">【特惠】母亲节，健康好礼低至5折！</a></div>
        <div style="margin-bottom: 10px;"><a href="#">【特惠】爆款数码产品七折秒！</a></div>
        <div style="margin-bottom: 10px;"><a href="#">【特惠】9.9元洗100张照片！</a></div>
        <div style="margin-bottom: 10px;"><a href="#">【特惠】长虹智能空调立省1000</a></div>
      </div>
      <div class="fontType" style="display: flex;text-align: center; margin: 12px 0px; cursor: pointer;">
        <div style="width: 33%;">
          <img src="../assets/images/qiye.png" style="width: 30px;" /><br/>
          企业购
        </div>
        <div style="width: 33%;">
          <img src="../assets/images/liwu.png" style="width: 30px;" /><br/>
          礼品卡
        </div>
        <div style="width: 34%;">
          <img src="../assets/images/huafei.png" style="width: 30px;" /><br/>
          话费
        </div>
      </div>
      <div class="fontType" style="display: flex;text-align: center; margin: 12px 0px; cursor: pointer;">
        <div style="width: 33%;">
          <img src="../assets/images/jiayou.png" style="width: 30px;" /><br/>
          加油卡
        </div>
        <div style="width: 33%;">
          <img src="../assets/images/jipiao.png" style="width: 30px;" /><br/>
          机票
        </div>
        <div style="width: 34%;">
          <img src="../assets/images/jiudian.png" style="width: 30px;" /><br/>
          酒店
        </div>
      </div>
      <div class="fontType" style="display: flex;text-align: center; margin: 12px 0px; cursor: pointer;">
        <div style="width: 33%;">
          <img src="../assets/images/wujin.png" style="width: 30px;" /><br/>
          五金
        </div>
        <div style="width: 33%;">
          <img src="../assets/images/wenwan.png" style="width: 30px;" /><br/>
          文玩
        </div>
        <div style="width: 34%;">
          <img src="../assets/images/lvyou.png" style="width: 30px;" /><br/>
          旅游
        </div>
      </div>
    </div>
    <div>
      <img src="../assets/images/sp.jpg" style="width: calc(100% - 10px); margin: 10px; margin-right: 0px; margin-top: 0px;" />
    </div>
  </div>
 </div>
 <div style=" background-color: rgba(200,22,35,0.1);">
  <div style="text-align: center; font-weight: bold; font-size: 24px; padding: 20px;">频道广场</div>
  <div style="display: flex; margin: 0px 30px; padding-bottom: 10px;">
    <div style="width: 25%; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">生鲜馆</span>
        <span style="color: #999; margin-left: 10px;">尝遍天下鲜</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/sx1.png" style="width: 50%;" />
          <img src="../assets/images/sx2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">拍拍二手</span>
        <span style="color: #999; margin-left: 10px;">大牌1元抢</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/pp1.png" style="width: 50%;" />
          <img src="../assets/images/pp2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">易购酒行</span>
        <span style="color: #999; margin-left: 10px;">享全球高档酒</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/yg1.png" style="width: 50%;" />
          <img src="../assets/images/yg2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">易购美妆</span>
        <span style="color: #999; margin-left: 10px;">懂你的美</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/mz1.png" style="width: 50%;" />
          <img src="../assets/images/mz2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
  </div>

  <div style="display: flex; margin: 0px 30px; padding-bottom: 30px;">
    <div style="width: 25%; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">企业团购</span>
        <span style="color: #999; margin-left: 10px;">一站式服务</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/qy1.png" style="width: 50%;" />
          <img src="../assets/images/qy2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">潮玩数码</span>
        <span style="color: #999; margin-left: 10px;">极致专业</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/sm1.png" style="width: 50%;" />
          <img src="../assets/images/sm2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">易购图书</span>
        <span style="color: #999; margin-left: 10px;">专注优质图书</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/ts1.png" style="width: 50%;" />
          <img src="../assets/images/ts2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; background-color: white;">
      <div class="fontType" style="padding: 30px;">
        <span style="font-size: 20px;">易购手机</span>
        <span style="color: #999; margin-left: 10px;">一个极客的诞生</span>
        <div style="display: flex; width: 100%;">
          <img src="../assets/images/sj1.png" style="width: 50%;" />
          <img src="../assets/images/sj2.png" style="width: 50%;" />
        </div>
      </div>
    </div>
  </div>

 </div>
 <div style="height: 20px;"></div>
</template>
   
<script setup lang="ts">

</script>

<style lang="less" scoped>

</style>